window.onload = function () {
    //导航条鼠标划过有滑块效果，点击后滑块固定在当前点击的条目上
    let nav1 = document.getElementById("nav1")
    let nav2 = document.getElementById("nav2")
    let nav3 = document.getElementById("nav3")
    let nav4 = document.getElementById("nav4")
    let nav5 = document.getElementById("nav5")

    nav1.onclick = () => {
        nav1.style.borderBottom = "3px solid #cccfd0"
        nav2.style.borderBottom = ""
        nav3.style.borderBottom = ""
        nav4.style.borderBottom = ""
        nav5.style.borderBottom = ""
    }
    nav2.onclick = () => {
        nav1.style.borderBottom = ""
        nav2.style.borderBottom = "3px solid #cccfd0"
        nav3.style.borderBottom = ""
        nav4.style.borderBottom = ""
        nav5.style.borderBottom = ""
    }
    nav3.onclick = () => {
        nav1.style.borderBottom = ""
        nav2.style.borderBottom = ""
        nav3.style.borderBottom = "3px solid #cccfd0"
        nav4.style.borderBottom = ""
        nav5.style.borderBottom = ""
    }
    nav4.onclick = () => {
        nav1.style.borderBottom = ""
        nav2.style.borderBottom = ""
        nav3.style.borderBottom = ""
        nav4.style.borderBottom = "3px solid #cccfd0"
        nav5.style.borderBottom = ""
    }
    nav5.onclick = () => {
        nav1.style.borderBottom = ""
        nav2.style.borderBottom = ""
        nav3.style.borderBottom = ""
        nav4.style.borderBottom = ""
        nav5.style.borderBottom = "3px solid #cccfd0"
    }







    //轮播图JS
    let slider = document.querySelector(".slider")
    let sliderWrapper = document.querySelector(".slider-wrapper")
    let sliderPrev = document.querySelector(".slider-prev")
    let sliderNext = document.querySelector(".slider-next")
    let sliderDot01 = document.querySelector(".slider-dot01")
    let sliderDot02 = document.querySelector(".slider-dot02")
    let sliderDot03 = document.querySelector(".slider-dot03")
    let sliderDot04 = document.querySelector(".slider-dot04")
    let sliderDot05 = document.querySelector(".slider-dot05")


    //第一张图片距离左边框距离默认为0
    let left = 0
    //定义计时器
    let timer
    //定义轮播图滑倒底时的定时器
    let timer1

    //如果left为0
    if (left === 0) {
        //第一个小点变色,其他小点不变(排它思想)
        sliderDot01.style.backgroundColor = "white"
        sliderDot02.style.backgroundColor = "#bdc0c3"
        sliderDot03.style.backgroundColor = "#bdc0c3"
        sliderDot04.style.backgroundColor = "#bdc0c3"
        sliderDot05.style.backgroundColor = "#bdc0c3"
    }

    //定义滑动图片的方法
    function slide() {
        //清除多个定时器
        clearInterval(timer)
        clearInterval(timer1)
        timer = setInterval(function () {
            left -= 519
            if (left === -519 || left === -3114) {
                //如果flet为-519,则第二个小点变色,其他小点不变(排它思想)
                sliderDot01.style.backgroundColor = "#bdc0c3"
                sliderDot02.style.backgroundColor = "white"
                sliderDot03.style.backgroundColor = "#bdc0c3"
                sliderDot04.style.backgroundColor = "#bdc0c3"
                sliderDot05.style.backgroundColor = "#bdc0c3"
            } else if (left === -1038) {
                //如果flet为-1038,则第三个小点变色,其他小点不变(排它思想)
                sliderDot01.style.backgroundColor = "#bdc0c3"
                sliderDot02.style.backgroundColor = "#bdc0c3"
                sliderDot03.style.backgroundColor = "white"
                sliderDot04.style.backgroundColor = "#bdc0c3"
                sliderDot05.style.backgroundColor = "#bdc0c3"
            } else if (left === -1557) {
                //如果flet为-1557,则第四个小点变色,其他小点不变(排它思想)
                sliderDot01.style.backgroundColor = "#bdc0c3"
                sliderDot02.style.backgroundColor = "#bdc0c3"
                sliderDot03.style.backgroundColor = "#bdc0c3"
                sliderDot04.style.backgroundColor = "white"
                sliderDot05.style.backgroundColor = "#bdc0c3"
            } else if (left === -2076) {
                //如果flet为-2076,则第五个小点变色,其他小点不变(排它思想)
                sliderDot01.style.backgroundColor = "#bdc0c3"
                sliderDot02.style.backgroundColor = "#bdc0c3"
                sliderDot03.style.backgroundColor = "#bdc0c3"
                sliderDot04.style.backgroundColor = "#bdc0c3"
                sliderDot05.style.backgroundColor = "white"
            } else {
                //第一个小点变色,其他小点不变(排它思想)
                sliderDot01.style.backgroundColor = "white"
                sliderDot02.style.backgroundColor = "#bdc0c3"
                sliderDot03.style.backgroundColor = "#bdc0c3"
                sliderDot04.style.backgroundColor = "#bdc0c3"
                sliderDot05.style.backgroundColor = "#bdc0c3"
            }
            //如果5张图片都滑倒底了,重新设置第一张图片距左边盒子距离为0
            if (left === -(6 * 519)) {
                sliderWrapper.style.transition = "none";
                left = 0
                timer1 = setInterval(function () {
                    left = -519
                    sliderWrapper.style.left = left + 'px'
                    clearInterval(timer1)
                    sliderWrapper.style.transition = "left 0.5s ease"
                }, 1)
            } else {
                sliderWrapper.style.transition = "left 0.5s ease"
            }
            sliderWrapper.style.left = left + 'px'
        }, 3000)
    }
    //调用滑动图片的方法
    slide()

    //鼠标移动到图片上时停止播放
    slider.onmouseenter = function () {
        clearInterval(timer)
    }

    //鼠标移出图片时继续轮播
    slider.onmouseleave = function () {
        timer = setInterval(function () {
            left -= 519
            if (left === -519 || left === -3114) {
                //如果flet为-519,则第二个小点变色,其他小点不变(排它思想)
                sliderDot01.style.backgroundColor = "#bdc0c3"
                sliderDot02.style.backgroundColor = "white"
                sliderDot03.style.backgroundColor = "#bdc0c3"
                sliderDot04.style.backgroundColor = "#bdc0c3"
                sliderDot05.style.backgroundColor = "#bdc0c3"
            } else if (left === -1038) {
                //如果flet为-1038,则第三个小点变色,其他小点不变(排它思想)
                sliderDot01.style.backgroundColor = "#bdc0c3"
                sliderDot02.style.backgroundColor = "#bdc0c3"
                sliderDot03.style.backgroundColor = "white"
                sliderDot04.style.backgroundColor = "#bdc0c3"
                sliderDot05.style.backgroundColor = "#bdc0c3"
            } else if (left === -1557) {
                //如果flet为-1557,则第四个小点变色,其他小点不变(排它思想)
                sliderDot01.style.backgroundColor = "#bdc0c3"
                sliderDot02.style.backgroundColor = "#bdc0c3"
                sliderDot03.style.backgroundColor = "#bdc0c3"
                sliderDot04.style.backgroundColor = "white"
                sliderDot05.style.backgroundColor = "#bdc0c3"
            } else if (left === -2076) {
                //如果flet为-2076,则第五个小点变色,其他小点不变(排它思想)
                sliderDot01.style.backgroundColor = "#bdc0c3"
                sliderDot02.style.backgroundColor = "#bdc0c3"
                sliderDot03.style.backgroundColor = "#bdc0c3"
                sliderDot04.style.backgroundColor = "#bdc0c3"
                sliderDot05.style.backgroundColor = "white"
            } else {
                //第一个小点变色,其他小点不变(排它思想)
                sliderDot01.style.backgroundColor = "white"
                sliderDot02.style.backgroundColor = "#bdc0c3"
                sliderDot03.style.backgroundColor = "#bdc0c3"
                sliderDot04.style.backgroundColor = "#bdc0c3"
                sliderDot05.style.backgroundColor = "#bdc0c3"
            }
            //如果5张图片都滑倒底了,重新设置第一张图片距左边盒子距离为0
            if (left === -(6 * 519)) {
                sliderWrapper.style.transition = "none";
                left = 0
                timer1 = setInterval(function () {
                    left = -519
                    sliderWrapper.style.left = left + 'px'
                    clearInterval(timer1)
                    sliderWrapper.style.transition = "left 0.5s ease"
                }, 1)
            } else {
                sliderWrapper.style.transition = "left 0.5s ease"
            }
            sliderWrapper.style.left = left + 'px'
        }, 3000)
    }

    //点击左边箭头
    sliderPrev.onclick = function () {
        if (left === 0 || left === -2595) {
            //如果flet为-0,则第五个小点变色,其他小点不变(排它思想)
            sliderDot01.style.backgroundColor = "#bdc0c3"
            sliderDot02.style.backgroundColor = "#bdc0c3"
            sliderDot03.style.backgroundColor = "#bdc0c3"
            sliderDot04.style.backgroundColor = "#bdc0c3"
            sliderDot05.style.backgroundColor = "white"
        } else if (left === -519) {
            //如果flet为-519,则第四个小点变色,其他小点不变(排它思想)
            sliderDot01.style.backgroundColor = "#bdc0c3"
            sliderDot02.style.backgroundColor = "#bdc0c3"
            sliderDot03.style.backgroundColor = "#bdc0c3"
            sliderDot04.style.backgroundColor = "white"
            sliderDot05.style.backgroundColor = "#bdc0c3"
        } else if (left === -1038) {
            //如果flet为-1038,则第三个小点变色,其他小点不变(排它思想)
            sliderDot01.style.backgroundColor = "#bdc0c3"
            sliderDot02.style.backgroundColor = "#bdc0c3"
            sliderDot03.style.backgroundColor = "white"
            sliderDot04.style.backgroundColor = "#bdc0c3"
            sliderDot05.style.backgroundColor = "#bdc0c3"
        } else if (left === -1557) {
            //如果flet为-1557,则第二个小点变色,其他小点不变(排它思想)
            sliderDot01.style.backgroundColor = "#bdc0c3"
            sliderDot02.style.backgroundColor = "white"
            sliderDot03.style.backgroundColor = "#bdc0c3"
            sliderDot04.style.backgroundColor = "#bdc0c3"
            sliderDot05.style.backgroundColor = "#bdc0c3"
        } else {
            //第一个小点变色,其他小点不变(排它思想)
            sliderDot01.style.backgroundColor = "white"
            sliderDot02.style.backgroundColor = "#bdc0c3"
            sliderDot03.style.backgroundColor = "#bdc0c3"
            sliderDot04.style.backgroundColor = "#bdc0c3"
            sliderDot05.style.backgroundColor = "#bdc0c3"
        }


        if (left === -(5 * 519)) {
            sliderWrapper.style.transition = "none";
            left = 0
            timer1 = setInterval(function () {
                left = -519
                sliderWrapper.style.left = left + 'px'
                clearInterval(timer1)
                sliderWrapper.style.transition = "left 0.5s ease"
            }, 1)
            sliderWrapper.style.left = left + 'px'
        } else {
            sliderWrapper.style.transition = "left 0.5s ease"
            left -= 519
            sliderWrapper.style.left = left + 'px'
        }
    }

    //点击右边箭头
    sliderNext.onclick = function () {
        if (left === 0) {
            //如果flet为-0,则第二个小点变色,其他小点不变(排它思想)
            sliderDot01.style.backgroundColor = "#bdc0c3"
            sliderDot02.style.backgroundColor = "white"
            sliderDot03.style.backgroundColor = "#bdc0c3"
            sliderDot04.style.backgroundColor = "#bdc0c3"
            sliderDot05.style.backgroundColor = "#bdc0c3"
        } else if (left === -2076) {
            //如果flet为-2076,则第三个小点变色,其他小点不变(排它思想)
            sliderDot01.style.backgroundColor = "#bdc0c3"
            sliderDot02.style.backgroundColor = "#bdc0c3"
            sliderDot03.style.backgroundColor = "white"
            sliderDot04.style.backgroundColor = "#bdc0c3"
            sliderDot05.style.backgroundColor = "#bdc0c3"
        } else if (left === -1557) {
            //如果flet为-1557,则第四个小点变色,其他小点不变(排它思想)
            sliderDot01.style.backgroundColor = "#bdc0c3"
            sliderDot02.style.backgroundColor = "#bdc0c3"
            sliderDot03.style.backgroundColor = "#bdc0c3"
            sliderDot04.style.backgroundColor = "white"
            sliderDot05.style.backgroundColor = "#bdc0c3"
        } else if (left === -1038) {
            //如果flet为-1038,则第五个小点变色,其他小点不变(排它思想)
            sliderDot01.style.backgroundColor = "#bdc0c3"
            sliderDot02.style.backgroundColor = "#bdc0c3"
            sliderDot03.style.backgroundColor = "#bdc0c3"
            sliderDot04.style.backgroundColor = "#bdc0c3"
            sliderDot05.style.backgroundColor = "white"
        } else {
            //第一个小点变色,其他小点不变(排它思想)
            sliderDot01.style.backgroundColor = "white"
            sliderDot02.style.backgroundColor = "#bdc0c3"
            sliderDot03.style.backgroundColor = "#bdc0c3"
            sliderDot04.style.backgroundColor = "#bdc0c3"
            sliderDot05.style.backgroundColor = "#bdc0c3"
        }


        if (left === 0) {
            sliderWrapper.style.transition = "none";
            left = -(5 * 519)
            timer1 = setInterval(function () {
                left = -(4 * 519)
                sliderWrapper.style.left = left + 'px'
                clearInterval(timer1)
                sliderWrapper.style.transition = "left 0.5s ease"
            }, 1)
            sliderWrapper.style.left = left + 'px'
        } else {
            left += 519
            sliderWrapper.style.left = left + 'px'
        }
    }


    //点击小点变色和显示对应的图片
    sliderDot01.onclick = function () {
        sliderDot01.style.backgroundColor = "white"
        sliderDot02.style.backgroundColor = ""
        sliderDot03.style.backgroundColor = ""
        sliderDot04.style.backgroundColor = ""
        sliderDot05.style.backgroundColor = ""
        left = 0
        sliderWrapper.style.left = left + 'px'
    }
    sliderDot02.onclick = function () {
        sliderDot01.style.backgroundColor = ""
        sliderDot02.style.backgroundColor = "white"
        sliderDot03.style.backgroundColor = ""
        sliderDot04.style.backgroundColor = ""
        sliderDot05.style.backgroundColor = ""
        left = -519
        sliderWrapper.style.left = left + 'px'
    }
    sliderDot03.onclick = function () {
        sliderDot01.style.backgroundColor = ""
        sliderDot02.style.backgroundColor = ""
        sliderDot03.style.backgroundColor = "white"
        sliderDot04.style.backgroundColor = ""
        sliderDot05.style.backgroundColor = ""
        left = -1038
        sliderWrapper.style.left = left + 'px'
    }
    sliderDot04.onclick = function () {
        sliderDot01.style.backgroundColor = ""
        sliderDot02.style.backgroundColor = ""
        sliderDot03.style.backgroundColor = ""
        sliderDot04.style.backgroundColor = "white"
        sliderDot05.style.backgroundColor = ""
        left = -1557
        sliderWrapper.style.left = left + 'px'
    }
    sliderDot05.onclick = function () {
        sliderDot01.style.backgroundColor = ""
        sliderDot02.style.backgroundColor = ""
        sliderDot03.style.backgroundColor = ""
        sliderDot04.style.backgroundColor = ""
        sliderDot05.style.backgroundColor = "white"
        left = -2076
        sliderWrapper.style.left = left + 'px'
    }



    //折线图数据展示区域JS

    //请求后端接口数据
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://edu.telking.com/api/?type=month');
    xhr.onload = function () {
        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            // 在这里可以对数据进行处理或者直接使用
            //console.log(data);
        } else {
            console.error(xhr.statusText);
        }
    };
    xhr.onerror = function () {
        console.error('请求失败');
    };
    xhr.send();


    const xhr1 = new XMLHttpRequest();
    xhr1.open('GET', 'https://edu.telking.com/api/?type=week');
    xhr1.onreadystatechange = function () {
        if (xhr1.readyState === XMLHttpRequest.DONE) {
            if (xhr1.status === 200) {
                const data = JSON.parse(xhr1.responseText);
                //console.log(data);
            } else {
                console.error('请求失败：', xhr1.status);
            }
        }
    };
    xhr1.send();

    //折线图监听
    xhr.addEventListener("load", function () {
        //console.log(JSON.parse(xhr.responseText));
        let dataMsg = JSON.parse(xhr.responseText)
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '曲线图数据展示',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: dataMsg.data.xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    itemStyle: { label: { show: true, color: '#2470ec' }, color: '#0042e8' },
                    data: dataMsg.data.series,
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: "blue",
                        opacity: 0.07,
                        origin: "start"
                    },
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })

    //饼状图和柱状图监听
    xhr1.addEventListener("load", function () {
        let dataMsg1 = JSON.parse(xhr1.responseText)
        let series = dataMsg1.data.series
        let xAxis = dataMsg1.data.xAxis

        // 基于准备好的dom，初始化饼状图实例
        var bingzhuang = echarts.init(document.getElementById('bingzhuangtu'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '饼状图数据展示',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '饼状图数据',
                    type: 'pie',
                    radius: '70%',
                    data: [
                        { value: series[0], name: xAxis[0] },
                        { value: series[1], name: xAxis[1] },
                        { value: series[2], name: xAxis[2] },
                        { value: series[3], name: xAxis[3] },
                        { value: series[4], name: xAxis[4] },
                        { value: series[5], name: xAxis[5] },
                        { value: series[6], name: xAxis[6] }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        bingzhuang.setOption(option);

        // 基于准备好的dom，初始化饼状图实例
        var zhuzhuang = echarts.init(document.getElementById('zhuzhuangtu'));

        option1 = {
            title: {
                text: '柱状图数据展示',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: xAxis
            },
            yAxis: {
                name: '商品数',
                nameTextStyle: {
                    fontSize: 14,
                    fontWeight: 'bold'
                },
                type: 'value'
            },
            series: [
                {
                    data: series,
                    type: 'bar',
                    barWidth: 20,
                }
            ]
        };
        zhuzhuang.setOption(option1)
    })
}




